<template>
<div class="oval-header pd-all">
  <!-- BLOCK: 头部信息 -->
  <van-row class="mg-btm pd-ver-lg c-white">
    <van-col class="text-center font-xl font-xl-line" span="3" v-if="stateIcon">
      <van-icon class-prefix="ucai-icon" :name="stateIcon" />
    </van-col>
    <van-col span="21">
      <span class="font-xl">{{refundData.state_name}}</span>
    </van-col>
  </van-row>

  <!-- BLOCK: 退款进度 -->
  <div class="panel-box">
    <ul class="panel-list dot-list">
      <!-- 非实物退款 -->
      <li>商家同意后，款项将原路退回支付账号</li>
      <!-- 实物退款 -->
      <!-- <li>商家同意后，请按照给出的退货地址退换货，并请记录退货单号</li> -->
      <li>如商家拒绝，您可以再次发起申请，商家会重新处理</li>
      <!-- <li>退货地址：</li> -->
    </ul>
    <div class="panel-foot bord-top-no text-right">
      <van-button
        v-if="state == 0 || state == 1 || state == 6 || state == 7"
        size="small"
        type="primary"
        plain
        @click="onCancel"
      >取消退款</van-button>
      <van-button
        v-if="state == 2 || state == 5"
        size="small"
        type="primary"
        plain
        @click="onRefund"
      >重新申请</van-button>
    </div>
  </div>

  <!-- BLOCK: 退款信息 -->
  <div class="panel-box">
    <div class="panel-head">
      {{refundData.product_name}}
    </div>
    <ul class="panel-list">
      <li>
        <van-row>
          <van-col class="title" span="7">价格类型</van-col>
          <van-col class="desc" span="17">{{refundData.sku_name}}</van-col>
        </van-row>
      </li>
      <li>
        <van-row>
          <van-col class="title" span="7">退款原因</van-col>
          <van-col class="desc" span="17">{{refundData.reason}}</van-col>
        </van-row>
      </li>
      <li>
        <van-row>
          <van-col class="title" span="7">退款金额</van-col>
          <van-col class="desc" span="17">￥{{refundData.refund_amount}}</van-col>
        </van-row>
      </li>
      <li>
        <van-row>
          <van-col class="title" span="7">手续费用</van-col>
          <van-col class="desc" span="17">￥{{refundData.fee}}</van-col>
        </van-row>
      </li>
      <li>
        <van-row>
          <van-col class="title" span="7">退款数量</van-col>
          <van-col class="desc" span="17">{{refundData.qty}}</van-col>
        </van-row>
      </li>
      <li>
        <van-row>
          <van-col class="title" span="7">申请时间</van-col>
          <van-col class="desc" span="17">{{refundData.created_at}}</van-col>
        </van-row>
      </li>
      <li>
        <van-row>
          <van-col class="title" span="7">订单编号</van-col>
          <van-col class="desc" span="17">{{refundData.order_no}}</van-col>
        </van-row>
      </li>
    </ul>
  </div>
</div>
</template>

<script>
import {
  Icon,
  Button,
  Row,
  Col,
  Toast,
  Dialog,
} from 'vant'
import NavBar from "@cmpt/header/navbar"
import {
  getRefundDetail,
  cancelRefund,
} from "@api/modules/order"

import {
  REFUND_STATE_LIST,
} from '@data/dic/order'

export default {
  name: 'refund-detail-pnl',
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Row.name]: Row,
    [Col.name]: Col,

    NavBar,
  },

  props: {
    data: {
      type: Object,
      default: {}
    },
  },

  data() {
    return {
      refundData: this.data || {}
    }
  },

  watch: {
    // TODO: 更新数据
    data: function (newData) {
      this.refundData = newData || {}
    }
  },

  computed: {
    state: function () {
      return this.refundData.state
    },
    stateIcon: function () {
      const status = this.state
      const obj = REFUND_STATE_LIST.find((item) => {
        return item.key == status
      })
      return obj ? obj.icon : ''
    },
  },

  methods: {
    onCancel() {
      Dialog.confirm({
        message: '确定取消退款？'
      }).then(() => {
        Toast.loading({
          duration: 10000,
          forbidClick: true
        });
        cancelRefund({
          refund_id: this.refundData.refund_id,
        }).then(res => {
          Toast.success('取消成功!')
          this.refundData = res.data || {};
        }).catch(err => {})
      })
    },

    onRefund() {
      this.$goPage('refund', {
        order_no: this.refundData.order_no,
        sku_id: this.refundData.sku_id
      })
    },
  },
}
</script>

<style lang="less" src="@style_m/components/panel.less"></style>
<style lang="less" src="@style_m/mod/order-detail.less"></style><style lang="less" scoped>
@import '~@style_m/basic/utils/index.less';

.dot-list {
  margin-left: @size-xs + @font-size-default + @size-sm;
  list-style-type: disc;

  li {
    padding-left: 0;
    padding-bottom: 0;
  }
}
</style>
